<template>
  <v-container>
    <v-card color="primary" dark>
      <v-card-title>
        反馈列表
        <v-spacer></v-spacer>
      </v-card-title>
    </v-card>
    <v-card v-for="i in feedbacks" v-bind:key="i.id">
      <v-card-title>{{ i[1] }}</v-card-title>
      <v-card-text>{{ i[2] }}</v-card-text>
      <v-card-text>{{ i[3] }}</v-card-text>
      <v-card-text>
        发起者：{{ i[4] }} | 请愿数：{{i[6]}} | 状态：{{ i[5] }}
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn v-if="granted()" color="primary" @click="modifyProgress(i[0])">
          <v-icon left>mdi-clipboard-text</v-icon>
          修改状态
        </v-btn>
        <v-btn color="primary" @click="want(i[0])">
          <v-icon left>mdi-account-plus</v-icon>
          请愿
        </v-btn>
      </v-card-actions>
    </v-card>
    <v-dialog v-model="dialog" max-width="80%">
      <v-card>
        <v-card-title>修改状态</v-card-title>
        <v-text-field
          v-model="progress"
          type="text"
        />
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="primary" text @click="updateModify()">确定</v-btn>
          <v-btn color="red darken-1" text @click="dialog = false">关闭</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-container>
</template>

<script>
import dialogs from "../utils/dialogs.js";
import axios from "axios";

export default {
  data: () => ({
    feedbacks: [],
    dialog: false,
    curId: undefined,
    progress: undefined
  }),
  mounted: function(){
    this.pageload();
  },
  methods: {
    pageload: async function(){
        console.log(this.granted());
        this.$store.commit("loading",true);
        await axios.post("/list",{
        }).then((res) => {
            this.feedbacks = res.data.list;
        }).catch((err) => {
            dialogs.toasts.error(err);
        });
        this.$store.commit("loading",false);
    },
    granted: function(){
      return this.$store.state.token!=undefined;
    },
    modifyProgress: function(id){
        this.curId = id;
        this.dialog = true;
    },
    updateModify: async function(){
        this.$store.commit("loading",true);
        this.dialog=false;
        await axios.post("/modify/"+this.curId,{
            "progress": this.progress
        }).then((res) => {
            if(res.data.type=="SUCCESS") dialogs.toasts.success("修改状态成功！");
            else if(res.data.type=="ERROR") dialogs.toasts.error(res.data.message);
            else dialogs.toasts.error("未知错误！");
        }).catch((err) => {
            dialogs.toasts.error(err);
        });
        this.$store.commit("loading",false);
    },
    want: async function(id){
        for(let i in this.$store.state.wants) if(this.$store.state.wants[i]==id){
            dialogs.toasts.error("请不要重复请愿！");
            return;
        }
        this.$store.commit("loading",true);
        await axios.post("/want/"+id).then((res) => {
            if(res.data.type=="SUCCESS"){
                dialogs.toasts.success("请愿成功！");
                this.$store.commit("want",id);
                for(let i in this.feedbacks) if(i[0]==id) i[6]+=1;
            }else if(res.data.type=="ERROR") dialogs.toasts.error(res.data.message);
            else dialogs.toasts.error("未知错误！");
        }).catch((err) => {
            dialogs.toasts.error(err);
        });
        this.$store.commit("loading",false);
        // location.reload();
    }
  },
};
</script>

<style scoped>
.v-card {
  margin: 0.3rem;
}
</style>